<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #role {
      height: 100px;
      width: 30px;
      transition: all 0.2s initial;
      background-color: rgb(233, 170, 170);
    }
  </style>
</head>

<body>
  <div id="role" style="transform: translate(0px,0px);"></div>
  <script>
    const getPosition = (ele) => {
      const po = ele.style.transform;
      const xy = po.slice(po.indexOf("(") + 1, po.indexOf(")")).split(",");
      return {
        x: +xy[0].replace("px", ""),
        y: +xy[1].replace("px", ""),
      };
    };
    const setTransfrom = (po) => {
      return `translate(${po.x}px, ${po.y}px)`;
    };
    let keyss = ['a', 's', 'd', 'w']
    let scharduler = {}
    let move = () => {
      const keys = Object.keys(scharduler)
      const p = getPosition(role)
      keys.forEach(key => {
        switch (key) {
          case 'a':
            p.x -= 10;
            role.style.transform = setTransfrom(p)
            break
          case 's':
            p.y += 10;
            role.style.transform = setTransfrom(p)
            break
          case 'd':
            p.x += 10;
            role.style.transform = setTransfrom(p)
            break
          case 'w':
            p.y -= 10;
            role.style.transform = setTransfrom(p)
            break
        }
      })
      requestAnimationFrame(move)
    }
    requestAnimationFrame(move)
    window.onkeydown = function (e) {
      scharduler[e.key] = true
    }
    window.onkeyup = function (e) {
      delete scharduler[e.key]
    }
    const role = document.querySelector('#role')
    console.log(getPosition(role));

  </script>
</body>

</html>